<template>
  <el-container class="height100">
    <el-aside class="height100 side-bg" style="width: 240px">
      <div class="side-logo">
        <img src="@/assets/logo.png" alt="" class="logo" />
        <span>四川省智能水务管理系统</span>
      </div>
      <PageMenu></PageMenu>
    </el-aside>
    <el-container class="right-height">
      <el-header class="header-bottom-border">
        <HeaderInfo></HeaderInfo>
      </el-header>
      <el-main class="bg-white main-height">
        <PageTitle></PageTitle>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HeaderInfo from '@/components/globalcomponent/HeaderInfo.vue'
import PageTitle from '@/components/globalcomponent/PageTitle.vue'

import PageMenu from '@/components/menu/PageMenu.vue'
export default {
  name: 'HomeView',
  data() {
    return {}
  },
  components: {
    HeaderInfo,
    PageTitle,
    PageMenu
  }
}
</script>

<style>
.right-height {
  min-height: calc(100% - 60px);
}
.main-height {
  min-height: calc(100% - 66px);
}
.side-logo {
  display: flex;
  height: 100px;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-image: linear-gradient(to right, #584475, #525389);
  color: rgb(234, 233, 247);
}
.logo {
  width: 50px;
  display: inline-block;
}
.side-bg {
  background-image: linear-gradient(to right, #584475, #525389);
}
.el-submenu__title {
  box-sizing: border-box;
  background-image: linear-gradient(to right, #584475, #525389);
}
.el-submenu__title:hover {
  background-image: linear-gradient(to right, #4f3d69, #4a4b7b);
}
.el-submenu__title > i:first-child {
  color: #aeaeb68e;
}
.el-submenu__title > i:last-child {
  color: #efefff;
}
.el-menu {
  border-right-width: 0;
}
.el-menu-item {
  background-image: linear-gradient(to right, #4f3d699c, #4a4b7ba1);
}
.el-menu-item:hover {
  border-bottom: 0.1px solid rgba(129, 122, 122, 0.432);
  transition: all 0.3s;
  /* background-image: linear-gradient(to right, #4f3d69, #4a4b7b); */
  background-color: #42426e;
}
/* .is-active {
  border-left: 2px solid #bab2c7;
} */
.header-bottom-border {
  border-bottom: 1px solid rgba(201, 197, 197, 0.596);
}

.bg-light {
  background-color: rgb(238, 220, 233);
}
</style>
